/*
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-05-12 10:14:45
 * @Description  : 日志时间轴组件
 */

import { NTimeline, NTimelineItem } from 'naive-ui'
import { formatTime } from '.'
import { renderOs } from './commonBusiness'
import { getLogTypeName } from '@/constants/log'
import SvgIcon from '@/components/SvgIcon/index.vue'

export const MyTimeLine = defineComponent({
  props: {
    data: [Array]
  },
  setup(props: any, { emit }) {
    return () =>
      h(
        NTimeline,
        {
          'icon-size': 30,
          style: {
            padding: '5px',
            height: '100%',
            overflow: 'auto'
          }
        },
        {
          default: () =>
            props.data.map((item: any) => {
              return h(
                NTimelineItem,
                {
                  title: getLogTypeName(item.type)?.name || '未知',
                  time: formatTime(item.createTime)
                },
                {
                  icon: () => {
                    return h(SvgIcon, {
                      icon: getLogTypeName(item.type)?.icon || '',
                      size: '30px',
                      color: 'rgb(51, 54, 57)',
                      class: 'mr-2'
                    })
                  },
                  default: () => {
                    return h(
                      'div',
                      {
                        class: 'list-item-a',
                        onClick(e: any) {
                          if (!e.sourceInfo) {
                            return
                          }
                          console.log(e.sourceInfo, 'click')
                          emit('source-click', e.sourceInfo)
                        }
                      },
                      renderLogDesc(item)
                    )
                  }
                }
              )
            })
        }
      )
  }
})

// 渲染日志的方法
const renderSourceBtn = (source: any, userId: any, isEllisp = true) => {
  const renderName = (source: any) => {
    if (source.parentLevel === '-1' && source.targetId === userId) {
      return '个人空间'
    }
    return source.filename
  }

  if (isEllisp) {
    return h(
      NEllipsis,
      {
        style: {
          'max-width': '80px'
        },
        tooltip: {
          raw: true,
          'content-class': 'bg-yellow-100 text-[#000] p-2',
          'arrow-class': '!bg-yellow-100'
        }
      },
      {
        default: () =>
          h(
            NButton,
            {
              type: 'primary',
              class: 'text-[13px] ',
              text: true,
              onClick(e: any) {
                e.sourceInfo = source
              }
            },
            {
              default: () => renderName(source)
            }
          )
      }
    )
  } else {
    return h(
      'span',
      {
        class: 'mx-2'
      },
      [
        h(
          NButton,
          {
            type: 'primary',
            class: 'text-[13px] ',
            text: true,
            onClick(e: any) {
              e.sourceInfo = source
            }
          },
          {
            default: () => renderName(source)
          }
        )
      ]
    )
  }
}

const renderLogDesc = (log: any) => {
  if (['user.login', 'user.register'].includes(log.type)) {
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        renderOs(log.uaParse.os),
        h('div', {
          style: {
            width: '10px'
          }
        }),
        renderOs(log.uaParse.browser)
      ]
    )
  }

  if (['user.logout', 'user.findPwd'].includes(log.type)) {
    return '用户：' + log.username || ''
    // return ''
  }

  if (log.type === 'user.infoUpdate') {
    if (!log.update.user) {
      return ''
    } else {
      const { nickname, password, avator, email } = log.update.user
      let str = ''
      nickname && (str += `昵称：${nickname}  `)
      password && (str += `密码：${password}  `)
      avator && (str += `头像：${avator}  `)
      email && (str += `邮箱：${email}  `)
      return str
    }
  }

  if (log.type === 'dep.create') {
    if (log.add && log.add.dep) {
      const { name } = log.add.dep
      const { name: pName } = log.add.pDep
      let str = ''
      name && (str += `名称：${name}  `)
      pName && (str += `父部门：${pName}  `)
      return str
    }

    return ''
  }

  if (log.type === 'dep.update') {
    if (log.update && log.update.dep) {
      const { name } = log.update.dep
      let str = ''
      name && (str += `名称：${name}  `)
      if (log.update.pDep) {
        const { name: pName } = log.update.pDep
        pName && (str += `父部门${pName}`)
      }
      return str
    }
    return ''
  }

  if (log.type === 'dep.delete') {
    if (log.dep) {
      const { name } = log.dep
      let str = ''
      name && (str += `名称：${name}  `)
      if (log.pDep) {
        const { name: pName } = log.pDep
        pName && (str += `父部门：${pName}`)
      }
      return str
    }
    return ''
  }

  if (['system.role.create', 'doc.role.create'].includes(log.type)) {
    if (log.add && log.add.role) {
      const { name } = log.add.role
      let str = ''
      name && (str += `名称：${name}  `)
      return str
    }
    return ''
  }

  if (['system.role.update', 'doc.role.update'].includes(log.type)) {
    if (log.update && log.update.role) {
      const { name } = log.update.role
      let str = ''
      name && (str += `名称：${name}  `)
      return str
    }
    return ''
  }

  if (['system.role.delete', 'doc.role.delete'].includes(log.type)) {
    if (log && log.role) {
      const { name } = log.role
      let str = ''
      name && (str += `名称：${name}  `)
      return str
    }
    return ''
  }

  if (log.type === 'admin.user.create') {
    if (log.add && log.add.user) {
      const { username } = log.add.user
      let str = ''
      username && (str += `用户：${username}`)

      let infoStr = ''
      if (log.add.userDeps) {
        const userDeps = log.add.userDeps
        for (let i = 0; i < userDeps.length; i++) {
          infoStr += '['
          const info = userDeps[i]
          const { name } = info.dep
          const { name: roleName } = info.role
          name && (infoStr += `部门：${username}，`)
          roleName && (infoStr += `角色：${roleName}，`)
          info.sizeMax && (infoStr += `空间大小：${info.sizeMax}`)
          infoStr += ']\n'
        }
      }
      // return str
      console.log(infoStr)

      return h(
        'div',
        {
          style: {
            display: 'flex',
            alignItems: 'center'
          }
        },
        [
          str,
          h(
            NEllipsis,
            {
              style: {
                'max-width': '100px'
              },
              tooltip: {
                raw: true,
                'content-class': 'bg-yellow-100 text-[#000] p-2',
                'arrow-class': '!bg-yellow-100'
              }
            },
            { default: () => infoStr }
          )
        ]
      )
    }
    return ''
  }

  if (log.type === 'admin.user.delete') {
    if (log.delete && log.delete.user) {
      const { username } = log.delete.user
      let str = ''
      username && (str += `用户：${username}  `)
      return str
    }
    return ''
  }

  if (log.type === 'admin.user.active') {
    if (log.update && log.update.user) {
      let str = ''
      const { username, status } = log.update.user
      username && (str += `用户：${username}  `)
      status !== undefined && (str += `状态：${status ? '启用' : '禁用'}`)
      return str
    }
    return ''
  }

  if (log.type === 'admin.user.copyToDep') {
    if (log.update && log.update.user) {
      let str = ''
      const { username } = log.update.user
      username && (str += `用户：${username}  `)
      // 更新用户所在部门
      let infoStr = ''
      if (log.update.userDeps) {
        const userDeps = log.update.userDeps
        for (let i = 0; i < userDeps.length; i++) {
          //
          infoStr += '['
          const info = userDeps[i]
          const { name } = info.dep
          const { name: roleName } = info.role
          name && (infoStr += `部门：${username}，`)
          roleName && (infoStr += `角色：${roleName}，`)
          info.sizeMax && (infoStr += `空间大小：${info.sizeMax}`)
          infoStr += ']'
        }
      }
      return h(
        'div',
        {
          style: {
            display: 'flex',
            alignItems: 'center'
          }
        },
        [
          str,
          h(
            NEllipsis,
            {
              style: {
                'max-width': '100px'
              },
              tooltip: {
                raw: true,
                'content-class': 'bg-yellow-100 text-[#000] p-2',
                'arrow-class': '!bg-yellow-100'
              }
            },
            { default: () => infoStr }
          )
        ]
      )
    }
    return ''
  }

  if (log.type === 'admin.user.removeFromDep') {
    if (log.delete && log.delete.user) {
      let str = ''
      const { username } = log.delete.user
      const { name } = log.delete.dep
      username && (str += `用户：${username}  `)
      username && (str += `部门：${name}  `)
      return str
    }
    return ''
  }

  if (log.type === 'admin.user.update') {
    if (log.update && log.update.user) {
      const {
        username,
        nickname,
        roleName,
        sex,
        sizeMax,
        email,
        phone,
        password
      } = log.update.user
      let str = ''
      username && (str += `用户：${username}  `)
      nickname && (str += `昵称：${nickname}  `)
      roleName && (str += `系统角色：${roleName}  `)
      sex !== undefined && (str += `性别：${+sex === 0 ? '男' : '女'}  `)
      sizeMax && (str += `空间：${sizeMax}  `)
      email && (str += `邮箱：${email}  `)
      phone && (str += `手机号：${phone}  `)
      password && (str += `密码：${password}  `)
      // 更新用户所在部门
      let infoStr = ''
      if (log.update.user.userDeps) {
        const userDeps = log.update.user.userDeps
        for (let i = 0; i < userDeps.length; i++) {
          //
          infoStr += '['
          const info = userDeps[i]
          const { name } = info.dep
          const { name: roleName } = info.role
          name && (infoStr += `部门：${username}，`)
          roleName && (infoStr += `角色：${roleName}，`)
          info.sizeMax && (infoStr += `空间大小：${info.sizeMax}`)
          infoStr += ']'
        }
      }
      return h(
        'div',
        {
          style: {
            display: 'flex',
            alignItems: 'center'
          }
        },
        [
          h(
            NEllipsis,
            {
              style: {
                'max-width': '100px'
              },
              tooltip: {
                raw: true,
                'content-class': 'bg-yellow-100 text-[#000] p-2',
                'arrow-class': '!bg-yellow-100'
              }
            },
            { default: () => str }
          ),
          h(
            NEllipsis,
            {
              style: {
                'max-width': '100px'
              },
              tooltip: {
                raw: true,
                'content-class': 'bg-yellow-100 text-[#000] p-2',
                'arrow-class': '!bg-yellow-100'
              }
            },
            { default: () => infoStr }
          )
        ]
      )
    }
    return ''
  }

  // 文件操作日志渲染
  if (log.type === 'source.mkdir') {
    if (!log.curSource) {
      return ''
    }
    //
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        '在',
        renderSourceBtn(log.pSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '创建了'
        ),
        renderSourceBtn(log.curSource, log.userId)
      ]
    )
  }

  if (log.type === 'source.rename') {
    if (!log.curSource) {
      return ''
    }
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      ['重命名了', renderSourceBtn(log.curSource, log.userId)]
    )
  }

  if (log.type === 'source.upload') {
    if (!log.curSource) {
      return ''
    }
    //
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        '在',
        renderSourceBtn(log.pSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '上传了'
        ),
        renderSourceBtn(log.curSource, log.userId)
      ]
    )
  }

  if (log.type === 'source.download.file') {
    if (!log.curSource) {
      return ''
    }
    //
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        '在',
        renderSourceBtn(log.pSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '下载了'
        ),
        renderSourceBtn(log.curSource, log.userId)
      ]
    )
  }

  if (log.type === 'source.download.dir') {
    //文件夹下载
    if (log.sources && log.sources.length) {
      return h(
        NEllipsis,
        {
          style: {
            'max-width': '240px'
          },
          tooltip: {
            raw: true,
            'content-class': 'bg-yellow-100 text-[#000] p-2',
            'arrow-class': '!bg-yellow-100'
          }
        },
        ['下载了'].concat(
          log.sources.map((item: any) =>
            renderSourceBtn(item, log.userId, false)
          )
        )
      )
    }

    return ''
  }

  if (log.type === 'source.bin') {
    //
    if (!log.curSource) {
      return ''
    }
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        '在',
        renderSourceBtn(log.pSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '将'
        ),
        renderSourceBtn(log.curSource, log.userId),
        '移到了回收站'
      ]
    )
  }

  if (log.type === 'source.delete') {
    //
    if (!log.curSource) {
      return ''
    }
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        '从',
        renderSourceBtn(log.pSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '删除了'
        ),
        renderSourceBtn(log.curSource, log.userId)
      ]
    )
  }

  if (log.type === 'source.recycle') {
    //
    if (!log.curSource) {
      return ''
    }
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        '还原',
        renderSourceBtn(log.curSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '到'
        ),
        renderSourceBtn(log.pSource, log.userId)
      ]
    )
  }

  if (log.type === 'source.move') {
    //移动
    if (!log.curSource) {
      return ''
    }
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        '将',
        renderSourceBtn(log.curSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '从'
        ),
        renderSourceBtn(log.pSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '移动到'
        ),
        renderSourceBtn(log.toSource, log.userId)
      ]
    )
  }

  if (log.type === 'source.copy') {
    // 复制
    if (!log.curSource) {
      return ''
    }
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        '将',
        renderSourceBtn(log.curSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '从'
        ),
        renderSourceBtn(log.pSource, log.userId),
        h(
          'div',
          {
            class: 'mx-2'
          },
          '复制到'
        ),
        renderSourceBtn(log.toSource, log.userId)
      ]
    )
  }

  if (['source.share.extend', 'source.share.inner'].includes(log.type)) {
    if (!log.share) {
      return ''
    }
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center'
        }
      },
      [
        log.model === 'cancel' ? '关闭了' : '更新了',
        h(
          NEllipsis,
          {
            style: {
              'max-width': '80px'
            },
            tooltip: {
              raw: true,
              'content-class': 'bg-yellow-100 text-[#000] p-2',
              'arrow-class': '!bg-yellow-100'
            }
          },
          {
            default: () =>
              h(
                NButton,
                {
                  type: 'primary',
                  class: 'text-[13px] ',
                  text: true,
                  onClick(e: any) {
                    // emit('source-click', e.sourceInfo)
                    // e.sourceInfo = source
                    e.sourceInfo = log.curSource
                  }
                },
                {
                  default: () => log.share.title
                }
              )
          }
        ),
        log.type === 'source.share.extend' ? '外链分享' : '内部协作分享'
      ]
    )
  }
}
